<template>
  <view class="search-page">
    <view class="search-header">
      <view class="search-input">
        <input type="text" ref="searchInputRef" :focus="domFocus"
          style="width: 100%; height: 100%; background-color: transparent; border: none; outline: none; font-size: 28rpx;text-align: center;"
          placeholder="搜索你想要的信息" v-model="keyword" @input="getSearchResult" @enter="getSearchResult" />
      </view>
    </view>

    <view class="search-history" v-if="searchHistory.length">
      <view class="search-history-title">
        <text>历史搜索</text>
      </view>
      <view class="search-history-list">
        <text class="search-history-item">汉长沙店铺</text>
        <text class="search-history-item">汉长沙店铺</text>
        <text class="search-history-item">汉长沙店铺</text>
        <text class="search-history-item">汉长沙店铺</text>
        <text class="search-history-item">汉长沙店铺</text>
        <text class="search-history-item">汉长沙店铺</text>
      </view>

    </view>
    <view class="search-content" v-if="isSearched">
      <view class="search-content-title">
        <text>搜索结果</text>
      </view>
      <view class="search-cotnent-list" v-if="searchResult.length > 0">
        <view class="search-cotnent-item" v-for="item in searchResult" :key="item.id" @click="goStoreDetail(item)">
          <image class="branch-img" :src="item.photo" mode="scaleToFill" />
          <view class="branch-content">
            <text class="branch-name">{{ item.name }}</text>
            <text class="branch-address">地址：{{ item.address }}</text>
          </view>
        </view>

      </view>
      <view class="none-result" v-else>
        <text>暂无搜索结果</text>
      </view>

    </view>
  </view>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import { getStoreListAPI } from '@/apis/home';
import { useCommonStore } from '@/store';
import { onMounted } from 'vue';

const commonStore = useCommonStore()
const searchHistory = ref([])
const searchResult = ref([])
const keyword = ref('')
const isSearched = ref(false)
const domFocus = ref(false)

const goStoreDetail = (item) => {
  uni.navigateTo({
    url: `/pages/subpackages/shopCenter/store-detail?branchCode=${item.branchCode}`
  })
}

const getSearchResult = async () => {
  isSearched.value = true
  console.log('keyword', keyword.value)
  const { cityCode } = commonStore.storeAndCityInfo
  const { data, code } = await getStoreListAPI({ cityCode, branchName: keyword.value })
  if (code === '200') {
    searchResult.value = data
  }
}

onMounted(() => {
  nextTick(() => {
    domFocus.value = true
  })
})


</script>

<style lang="scss" scoped>
.search-page {
  height: 100vh;
  background-color: #F1F1F1;
  box-sizing: border-box;

  .search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 30rpx;

    .search-input {
      width: 100%;
      height: 68rpx;
      box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
      border-radius: 40rpx;
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      background-color: #F8F8F8;
      display: flex;
      align-items: center;
      justify-content: space-between;

    }
  }

  .search-history-title,
  .search-content-title {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .search-history {
    padding: 30rpx;

    .search-history-list {
      display: flex;
      gap: 20rpx;
      flex-wrap: wrap;

      .search-history-item {
        font-size: 22rpx;
        background-color: #fff;
        padding: 4rpx 20rpx;
        border-radius: 30rpx;

      }
    }
  }

  .search-content {
    padding: 30rpx;

    .search-cotnent-list {
      display: flex;
      flex-direction: column;
      gap: 20rpx;

      .search-cotnent-item {
        width: 100%;
        background-color: #fff;
        display: flex;
        padding: 20rpx;
        border-radius: 20rpx;

        .branch-img {
          width: 150rpx;
          height: 100rpx;

        }

        .branch-content {
          display: flex;
          flex-direction: column;
          margin-left: 20rpx;
          justify-content: space-between;

          .branch-name {
            font-size: 28rpx;
          }

          .branch-address {
            font-size: 22rpx;
          }
        }

      }
    }
  }

  .none-result {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 28rpx;
  }
}
</style>
